import React, { useState, useEffect } from 'react';
import { List, Button, Skeleton, message } from 'antd';
import { EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import style from './newsRecommend.module.css';
import { post } from './../../utils/post';
const NewsRecommend = (props) => {
    let num = 0;
    let searchAttention = []
    const _id= JSON.parse(localStorage.getItem('usersMessage'))._id
    useEffect( () => {
        post('/api/searchAttention', { _id }).then(res => {
            searchAttention = res.data.data.allAttention
            if (!searchAttention) {
                setState({
                    ...state,
                    initLoading: false,
                    loading: false,
                })
            } else {
                setState(
                    {
                        ...state,
                        initLoading: false,
                        loading: false,
                        data: searchAttention.slice(num, num + 3),
                        list: searchAttention
                    }
                )
            }
        })
        // 发送一个请求
        // console.log(props.searchAttention, '----searchAttention---');

    }, []);

    const seeMore = (e) => {
        message.info(`${e.name} -- ${e.picture}`);
        console.log(e);
    }
    const count = 3
    const [state, setState] = useState({
        initLoading: true,
        loading: false,
        data: [],
        list: []
    })
    const SettingOutLined = (e) => {
        console.log(e);
    }
    const onLoadMore = () => {
        num += 3
        setState(
            {
                ...state,
                loading: true,
                list: state.data.concat(
                    [...new Array(count)].map(() => ({ name: {}, picture: {} })),
                ),
            }
        )
        if (searchAttention.length < num) {
            message.warn('没有更多数据了...')
            setState(
                {
                    ...state,
                    loading: true
                }
            )
        } else {
            const data = state.data.concat(searchAttention.slice(num, num + 3))
            setState(
                {
                    ...state,
                    loading: false,
                    data,
                    list: data
                }
            )
        }
        // 再去发送请求
        //  然后去更新,更新成功则重新让loading为false
        // const data = state.data.concat(resuluts.data);

    }
    const loadMore = !state.initLoading && !state.loading ? (
        <div
            style={{
                textAlign: 'center',
                marginTop: 12,
                height: 32,
                lineHeight: '32px',
            }}
        >
            <Button className={`${style.moreButton}`} onClick={onLoadMore}>loading more</Button>
        </div>
    ) : null;

    return (
        <div className={`${style.body}`}>
            <List
                header={<div className={`${style.listHeader}`}><h2>I am Concerned</h2><SettingOutlined onClick={SettingOutLined} /></div>}
                bordered
                loading={state.initLoading}
                loadMore={loadMore}
                dataSource={state.list}
                className={`${style.list}`}
                renderItem={
                    item => <List.Item>
                        <div className={`${style.listItem}`}>
                            <Skeleton title={false} loading={item.loading} active>
                                <List.Item.Meta
                                    // avatar={<Avatar src={item.picture.large} />}
                                    title={<a href="#">{item.nickname}</a>}
                                    description={item.profile}
                                />
                            </Skeleton>
                            <EllipsisOutlined onClick={() => {
                                seeMore(item)
                            }} />
                        </div>

                    </List.Item>
                }
            />
        </div>
    )
}
export default NewsRecommend